﻿
@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_LayoutForEUI.cshtml";
}
<script src="~/Content/InsdepUI/plugin/echarts-4.0.2/echarts-4.0.2.min.js"></script>
<link href="~/Content/InsdepUI/plus/panel/statistic_standard_panel/style.css" rel="stylesheet" type="text/css">
<link href="~/Content/InsdepUI/iconfont/iconfont.css" rel="stylesheet" type="text/css">
<div style="padding-top:5px;padding-left:5px">
    <table style="width: 100%; padding-top:10px;padding-left:10px">
        <tr>
            <td style="width: 50%">
                <div class="easyui-panel" title="<b>借阅类型的分类</b>" data-options="headerCls:'panel-bar-blue panel-underline-blue'" style="width: 99%;">
                    <div style="padding: 10px">
                        <div id="StatBrr_View_Type" style="width:100%;height:400px"></div>
                    </div>
                </div>
            </td>
            <td style="width: 50%">
                <div class="easyui-panel" title="<b>利用档案分类</b>" data-options="headerCls:'panel-bar-blue panel-underline-blue'" style="width: 99%;">
                    <div style="padding: 10px">
                        <div id="StatBrr_View_AType" style="width:100%;height:400px"></div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2"><br/></td>
        </tr>
        <tr>
            <td style="width: 50%">
                <div class="easyui-panel" title="<b>利用目的的分类</b>" data-options="headerCls:'panel-bar-blue panel-underline-blue'" style="width: 99%;">
                    <div style="padding: 10px">
                        <div id="StatBrr_View_Lymd" style="width:100%;height:400px"></div>
                    </div>
                </div>
            </td>
            <td style="width: 50%">
                @*<div class="easyui-panel" title="<b>利用部门的分类</b>" data-options="headerCls:'panel-bar-blue panel-underline-blue'" style="width: 99%;">
                    <div style="padding: 10px">
                        <div id="StatBrr_View_Lybm" style="width:100%;height:400px"></div>
                    </div>
                </div>*@
            </td>
        </tr>
    </table>
</div>
<script>
    $(document).ready(function () {
        start('@ViewBag.SD', '@ViewBag.ED');
    });

    function start(sd,ed) {
        $.ajax({
            type: "post",
            url: "/StatBrr/Get_ajaxTongji_Type?sd=" + sd + "&ed=" + ed,
            dataType: "json",
            success: function (data) {
                ////基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('StatBrr_View_Type'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'center',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '借阅类型的分类',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        // abg: {
                                        //     backgroundColor: '#333',
                                        //     width: '100%',
                                        //     align: 'right',
                                        //     height: 22,
                                        //     borderRadius: [4, 4, 0, 0]
                                        // },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });

        $.ajax({
            type: "post",
            url: "/StatBrr/Get_ajaxTongji_ArType?sd=" + sd + "&ed=" + ed,
            dataType: "json",
            success: function (data) {
                ////基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('StatBrr_View_AType'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'center',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '利用档案分类',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        // abg: {
                                        //     backgroundColor: '#333',
                                        //     width: '100%',
                                        //     align: 'right',
                                        //     height: 22,
                                        //     borderRadius: [4, 4, 0, 0]
                                        // },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });

        $.ajax({
            type: "post",
            url: "/StatBrr/Get_ajaxTongji_Lymd?sd=" + sd + "&ed=" + ed,
            dataType: "json",
            success: function (data) {
                ////基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('StatBrr_View_Lymd'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'center',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '利用目的的分类',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        // abg: {
                                        //     backgroundColor: '#333',
                                        //     width: '100%',
                                        //     align: 'right',
                                        //     height: 22,
                                        //     borderRadius: [4, 4, 0, 0]
                                        // },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
</script>
